/*========================================================
        DARK LAYOUT
=========================================================*/
@-webkit-keyframes cube-transition {
  25% {
    -webkit-transform : translateX(50px) scale(0.5) rotate(-90deg);
            transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform : translate(50px, 50px) rotate(-180deg);
            transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(-270deg);
            transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}
@-moz-keyframes cube-transition {
  25% {
    -moz-transform : translateX(50px) scale(0.5) rotate(-90deg);
         transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -moz-transform : translate(50px, 50px) rotate(-180deg);
         transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -moz-transform : translateY(50px) scale(0.5) rotate(-270deg);
         transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -moz-transform : rotate(-360deg);
         transform : rotate(-360deg);
  }
}
@-o-keyframes cube-transition {
  25% {
    -o-transform : translateX(50px) scale(0.5) rotate(-90deg);
       transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -o-transform : translate(50px, 50px) rotate(-180deg);
       transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -o-transform : translateY(50px) scale(0.5) rotate(-270deg);
       transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -o-transform : rotate(-360deg);
       transform : rotate(-360deg);
  }
}
@keyframes cube-transition {
  25% {
    -webkit-transform : translateX(50px) scale(0.5) rotate(-90deg);
       -moz-transform : translateX(50px) scale(0.5) rotate(-90deg);
         -o-transform : translateX(50px) scale(0.5) rotate(-90deg);
            transform : translateX(50px) scale(0.5) rotate(-90deg);
  }
  50% {
    -webkit-transform : translate(50px, 50px) rotate(-180deg);
       -moz-transform : translate(50px, 50px) rotate(-180deg);
         -o-transform : translate(50px, 50px) rotate(-180deg);
            transform : translate(50px, 50px) rotate(-180deg);
  }
  75% {
    -webkit-transform : translateY(50px) scale(0.5) rotate(-270deg);
       -moz-transform : translateY(50px) scale(0.5) rotate(-270deg);
         -o-transform : translateY(50px) scale(0.5) rotate(-270deg);
            transform : translateY(50px) scale(0.5) rotate(-270deg);
  }
  100% {
    -webkit-transform : rotate(-360deg);
       -moz-transform : rotate(-360deg);
         -o-transform : rotate(-360deg);
            transform : rotate(-360deg);
  }
}

.cube-transition {
  position : relative;
  -webkit-transform : translate(-25px, -25px);
     -moz-transform : translate(-25px, -25px);
      -ms-transform : translate(-25px, -25px);
       -o-transform : translate(-25px, -25px);
          transform : translate(-25px, -25px);
}
.cube-transition > div {
  -webkit-animation-fill-mode : both;
     -moz-animation-fill-mode : both;
       -o-animation-fill-mode : both;
          animation-fill-mode : both;
  width : 10px;
  height : 10px;
  position : absolute;
  top : -5px;
  left : -5px;
  background-color : #B8C2CC;
  -webkit-animation : cube-transition 1.6s 0s infinite ease-in-out;
     -moz-animation : cube-transition 1.6s 0s infinite ease-in-out;
       -o-animation : cube-transition 1.6s 0s infinite ease-in-out;
          animation : cube-transition 1.6s 0s infinite ease-in-out;
}
.cube-transition > div:last-child {
  -webkit-animation-delay : -0.8s;
     -moz-animation-delay : -0.8s;
       -o-animation-delay : -0.8s;
          animation-delay : -0.8s;
}